<template>
  <el-container>
    <el-main>
      <el-form ref="form" :model="form" :rules="formrules" label-width="80px">
        <div class="fis"><h1>CMR客户端管理系统</h1></div>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            placeholder="请输入密码"
            v-model="form.pass"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item class="juo">
          <el-button type="primary" @click="onSubmit('form')">登录</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form></el-main
    >
  </el-container>
</template>
<script>
import { selet } from "../http/user.js";
export default {
  data() {
    return {
      form: {
        name: "",
        pass: "",
        UserID: "",
        RoleID: "",
      },
      formrules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          selet({
            params: {
              name: this.form.name,
              pass: this.form.pass,
            },
          })
            .then((res) => {
              if (res.Data != null) {
                this.UserID = res.Data.UserID;
                this.form.RoleID = res.Data.RoleID;
                this.form.img = res.Data.img;
                this.$message({
                  message: "登录成功",
                  type: "success",
                });
                this.$store.commit("img", this.form.img);
                this.$store.commit("UserID", this.UserID);
                this.$store.commit("name", this.form.name);
                this.$store.commit("RoleID", this.form.RoleID);
                this.$router.push("/user");
              } else {
                this.$message({
                  message: "账号密码错误!",
                  type: "error",
                });
              }
            })
            .catch((err) => {
              console.info(err);
            });
        } else {
          this.$message({
            message: "账号密码不能为空!",
            type: "error",
          });
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.fis {
  border-bottom: solid white 3px;
  margin-bottom: 40px;
  padding-right: 30px;
  margin-right: -35px;
}
.el-form {
  width: 500px;
  height: 350px;
  transform: translate(90%, 50%);
  border: solid white 1px;
  background-color: rgba(255, 255, 255, 0.5);
  padding-right: 35px;
  border-radius: 10px;
}
.el-main {
  width: 100%;
  height: 100%;
  background-image: url("../assets/R-C.png");
  background-size: cover;
  background-position: center;
  position: relative;
  color: rgb(51, 51, 51);
  text-align: center;
  overflow: hidden;
  height: 737px;
}
.juo {
  margin-left: -40px;
}
h1 {
  color: white;
}
</style>